import { DEFAULT_THEME, px } from '@mantine/core';
import { StylesDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.ResponsiveStyles);

# Responsive styles

## Media queries

<Demo data={StylesDemos.responsive} />

## Configure breakpoints

`theme.breakpoints` are used in all responsive Mantine components. Breakpoints are expected to be set in `em` units.
You can configure these values with [MantineProvider](/theming/mantine-provider/):

```tsx
import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  breakpoints: {
    xs: '30em',
    sm: '48em',
    md: '64em',
    lg: '74em',
    xl: '90em',
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

Default `theme.breakpoints` values:

<DataTable
  head={['Breakpoint', 'Viewport width', 'Value in px']}
  data={Object.keys(DEFAULT_THEME.breakpoints).map((size) => [
    size,
    `${DEFAULT_THEME.breakpoints[size]}`,
    `${px(DEFAULT_THEME.breakpoints[size])}px`,
  ])}
/>

## Breakpoints variables in CSS modules

It is not possible to use CSS variables inside media queries – these values cannot be dynamically
generated by [MantineProvider](/theming/mantine-provider). To use Mantine theme breakpoints
in your `.css` files, you will need `postcss-simple-vars` package:

<InstallScript dev packages="postcss-simple-vars" />

Add it to your [PostCSS config](/styles/postcss-preset) in `postcss.config.cjs`:

```js
module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};
```

Then you will be able to access these variables in your `.css` files:

```css
.demo {
  @media (max-width: $mantine-breakpoint-xs) {
    background-color: red;
  }
}
```

Will be transformed to:

```css
@media (max-width: 36em) {
  .demo {
    background-color: red;
  }
}
```

> **Dynamic breakpoints are not supported**
>
> Values that are defined in `postcss-simple-vars` config are static and
> are not connected to the [theme](/theming/theme-object) – if values change,
> you will need to update them manually in both theme override and postcss config.

## hiddenFrom and visibleFrom props

All Mantine components that have a root element support `hiddenFrom` and `visibleFrom` props.
These props accept breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) and hide the component when
viewport width is less than or greater than the specified breakpoint:

<Demo data={StylesDemos.hiddenVisible} />

## Hidden and visible from as classes

If you are building a custom component and want to use the same logic as in `hiddenFrom` and `visibleFrom` props
but you do not want to use Mantine components, you can use `mantine-hidden-from-{x}` and `mantine-visible-from-{x}`
classes.

```tsx
function CustomComponent() {
  return (
    <>
      <div className="mantine-hidden-from-md">Hidden from md</div>
      <div className="mantine-visible-from-xl">Visible from xl</div>
    </>
  );
}
```

## Component size based on media query

Some components support `size` prop, which changes various aspects of component appearance.
`size` prop is not responsive – it is not possible to define different component sizes for different
screen sizes. Instead, you can render multiple components with different sizes and show/hide them
based on media query with `className` or `hiddenFrom`/`visibleFrom` props:

<Demo data={StylesDemos.sizesMedia} />

## use-media-query hook

You can use [use-media-query hook](/hooks/use-media-query/) to change some of component props
based on media query. Note that this approach is not recommended for most of the cases if you have
ssr in your application (you use Next.js, React Router, Gatsby or any other framework that includes ssr)
as it may cause hydration mismatch. If you do not have ssr in your application (for example, if you use Vite),
then you can safely use this hook to change props of components or conditionally render components
based on hook return value.

[use-media-query hook](/hooks/use-media-query/) can be safely used to change props of components that are not rendered
on server side (modals, tooltips, etc.). In the following example, it is safe to use `useMediaQuery` hook to
change [Tooltip](/core/tooltip) props as it is not rendered on server side:

<Demo data={StylesDemos.useMediaQueryHook} />

## use-matches hook

`use-matches` hook exported from `@mantine/core` is an alternative to [use-media-query](/hooks/use-media-query/)
if you need to match multiple media queries and values. It accepts an object with media queries as keys and
values at given breakpoint as values.

Note that `use-matches` hook uses the same logic as [use-media-query](/hooks/use-media-query/) under the hood,
it is not recommended to be used as a primary source of responsive styles, especially if you have ssr in your application.

In the following example:

- Starting from `theme.breakpoints.lg`, color will be `red.9`
- Between `theme.breakpoints.sm` and `theme.breakpoints.lg`, color will be `orange.9`
- Below `theme.breakpoints.sm`, color will be `blue.9`

<Demo data={StylesDemos.useMatchesHook} />

## Container queries

[Container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)
enable you to apply styles to an element based on the size of the element's container.
If, for example, a container has less space available in the surrounding context,
you can hide certain elements or use smaller fonts. Container queries are supported
in [all modern browsers](https://caniuse.com/css-container-queries).

You can use `rem` and `em` functions from [postcss-preset-mantine](/styles/postcss-preset/#remem-functions)
in container queries. Note that CSS variables do not work in container queries and because of that
[rem scaling](/styles/rem/#rem-units-scaling) feature is not available. If you rely on this feature,
it is better to define breakpoints in `px` units.

<Demo data={StylesDemos.containers} />

## Responsive style props

You can use object syntax to add responsive styles with [style props](/styles/style-props).
Note that responsive style props are [less performant](/styles/styles-performance) than regular style props,
it is not recommended to use them in large lists of elements.

<Demo data={StylesDemos.responsiveStyleProps} />

Responsive values are calculated the following way:

- `base` value is used when none of breakpoint values are applied
- `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in [theme.breakpoints](/styles/responsive/)

```tsx
import { Box } from '@mantine/core';

function Demo() {
  return <Box w={{ base: 320, sm: 480, lg: 640 }} />;
}
```

In this case the element will have the following styles:

```css
/* Base styles added to element and then get overwritten with responsive values */
.element {
  width: 20rem;
}

/* 48em is theme.breakpoints.sm by default */
@media (min-width: 48em) {
  .element {
    width: 30rem;
  }
}

/* 75em is theme.breakpoints.lg by default */
@media (min-width: 75em) {
  .element {
    width: 40rem;
  }
}
```
